<!DOCTYPE html>
<html lang="en">

<head>
    <title>${activity.title!''}</title>
    <#include "/toupiao/components/meta.html" />
    <#include "/toupiao/components/stylesheets.html" />
    <link href="https://cdn.bootcss.com/layer/3.1.0/theme/default/layer.css" rel="stylesheet">
    <link rel="stylesheet" href="/toupiao/stylesheets/index.css?v=2">
</head>

<body>
    <div id="app">
        <#assign scrollingText = activity.notification! />
        <#include "/toupiao/components/scrolling.html" />
        <img src="${activity.banner!''}" style="height: 200px;width: 100%">
        <div class="info">
            <ul class="am-avg-sm-3 info-status am-text-center">
                <li>
                    <div><i class="am-icon-user"></i>&nbsp;参赛选手</div>
                    <div>${activity.joinCount!}</div>
                </li>
                <li>
                    <div><i class="am-icon-thumbs-o-up"></i>&nbsp;累计投票</div>
                    <div>${activity.voteCount!}</div>
                </li>
                <li>
                    <div><i class="am-icon-star"></i>&nbsp;访问人数</div>
                    <div>${activity.visitCount!}</div>
                </li>
            </ul>
            <div class="remainingTime">
                <div class="title">
                    <span>投票通道关闭倒计时</span>
                </div>
                <div class="counter">
                    <div id="day-counter"></div>
                    <div id="hour-counter"></div>
                    <div id="min-counter"></div>
                    <div id="sec-counter"></div>
                </div>
            </div>
        </div>
        <!-- <div class="search">
            <div class="search-box am-g">
                <div class="am-u-sm-8">
                    <input type="text" placeholder="请输入编号或姓名" />
                </div>
                <div class="am-u-sm-4">
                    <a href="" class="am-btn am-btn-default am-btn-xs" role="button">搜索</a>
                </div>
            </div>
        </div> -->
        <div class="ranking-container">
            <div class="ranking">
                <#list items as item>
                    <div class="ranking-item">
                        <div class="container">
                            <div class="ribbon"></div>
                            <a href="/toupiao/info/${item.code!}">
                                <div class="cover">
                                    <img src="${item.cover!}" />
                                    <div class="background"></div>
                                    <div class="number">编号：${item.no!}</div>
                                </div>
                                <div class="name">${item.title!}</div>
                            </a>
                            <div class="vote">
                                <span>${item.vote!}票</span>
                                <a href="javascript:" class="am-btn am-btn-default am-btn-xs vote-btn" role="button" data-code="${item.code!}">投票</a>
                            </div>
                        </div>
                    </div>
                </#list>
                <div class="am-cf"></div>
            </div>
        </div>
        <div class="rule">
            <div class="top">
                <span><i class="am-icon-book"></i>&nbsp;活动规则</span>
            </div>
            <div class="content">
                <span>${activity.rule!}</span>
            </div>
        </div>
        <div class="bottom-copyright">
            <a href="http://www.zhen-yee.com/">此网站由 蓁奕互联网科技有限公司 开发</a>
        </div>
        <#assign select = 1 />
        <#include "/toupiao/components/footer.html" />
    </div>
    <#include "/toupiao/components/scripts.html" />
    <#include "/toupiao/components/wxConfig.html" />
    <script src="https://cdn.bootcss.com/layer/3.1.0/layer.js"></script>
    <script src="https://cdn.bootcss.com/axios/0.18.0/axios.min.js"></script>
    <script src="https://cdn.bootcss.com/jquery.countdown/2.2.0/jquery.countdown.js"></script>
    <script type="text/javascript">
    var app = new Vue({
        el: '#app',
        data: {},
        methods: {}
    })
    </script>
    <script>
    $(document).ready(function() {
        $(".vote-btn").click(function() {
            var self = $(this);
            axios.get('/toupiao/vote/' + self.attr("data-code"))
                .then(function(response) {
                    if (response.data.status == 200) {
                        self.prev().text(response.data.info + "票");
                        // layer.msg("投票成功");
                        window.location.href = "/toupiao/voteResult/${(activity.code)!}";
                    } else {
                        layer.msg("投票失败：" + response.data.msg);
                        console.log(response);
                    }
                })
                .catch(function(error) {
                    layer.msg("投票失败：" + error);
                    console.log(error);
                });
            // window.location.href = "/toupiao/vote/" + self.attr("data-code");
        })
        if ("${isExpired!}" == "1") {
            layer.open({
                content: '活动已结束',
                btn: '确定'
            });
        }
    })
    </script>
    <script>
    var endTime = "${activity.endTime!}";
    $("#day-counter")
        .countdown(endTime, function(event) {
            $(this).text(
                event.strftime('%D 天')
            );
        });
    $("#hour-counter")
        .countdown(endTime, function(event) {
            $(this).text(
                event.strftime('%H 时')
            );
        });
    $("#min-counter")
        .countdown(endTime, function(event) {
            $(this).text(
                event.strftime('%M 分')
            );
        });
    $("#sec-counter")
        .countdown(endTime, function(event) {
            $(this).text(
                event.strftime('%S 秒')
            );
        });
    </script>
    <script>
    wx.ready(function() {
        var title = "${activity.shareTitle!}";
        var desc = "${activity.shareDesc!}";
        var link = "${host}/toupiao/${(activity.code)!}";
        var imgUrl = "${activity.shareImage!}";
        initWXShareAll(title, desc, link, imgUrl);
    });
    </script>
</body>

</html>